<template>
  <div class="head">
    <div>
      <div v-for="(list,index) in list" :key="index" :style="{width: width}" :class="list.class" @touchend="active(index)">{{list.name}}</div>
    </div>
    <div>
      <yd-icon name="readAddTo" custom slot="icon"></yd-icon>
    </div>
  </div>
</template>
<script>
import bus from '@/common/js/base/eventBus.js'
  export default {
    data(){
      return {
        list:[
//          {name:'附近',class:'active',resource:'附近'},
//          {name:'推荐',class:'',resource:'推荐'},
//          {name:'热点',class:'',resource:'热点'},
//          {name:'视频',class:'',resource:'视频'}
        ],
        width:null
      }
    },
    methods:{
      active(n){
        for(var i=0;i<this.list.length;i++){
          if(i!=n){
            this.list[i].class = ''
          }else {
            this.list[i].class = 'active';
            bus.$emit('resources',this.list[n])
          }
        }
      },
    },
    activated(){
      let data={}
      this.ylAjax.titles(data).then(msg=>{
//        console.log(msg)
        for(var i=0;i<msg.data.length;i++){
          msg.data[i].name = msg.data[i].title
          msg.data[i].class = ''
          if(msg.data[i].title=='推荐'){
            msg.data[i].class = 'active'
          }
        }
        this.list = msg.data
        for(var i=0;i<this.list.length;i++){
          if(this.list[i].class == 'active'){
            this.$store.commit('dynamicUrl',msg.data[i])
          }
        }
        this.width = 100/this.list.length+'%'
      })
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";
  .head{
    background: @readHead-bg;
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 0.92rem;
    >div{
      float: left;
    }
    >div:nth-child(1){
      width: 90%;
      >div{
        float: left;
        line-height: 0.92rem;
        font-size: 14px;
        text-align: center;
      }
    }
    >div:nth-child(2){
      width: 10%;
      line-height: 0.92rem;
      >i{
        color: white;
      }
    }
  }
  .active{
    color:@readActive-color;
  }
</style>
